<%--
  Created by IntelliJ IDEA.
  User: 小袁啊
  Date: 2024/10/30
  Time: 下午7:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="../css/main.css">
    <%--引入vue--%>
    <script src="../js/vue.js"></script>
    <%--引入axios--%>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <%--引入echarts--%>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">

    <div style="width: 97%;" class="topInfo">
        <span>{{staff.staffname}}，欢迎使用后台管理系统，当前登录店铺是</span>
        <span class="branchid">{{staff.branch.branchname}}</span>
    </div>


    <div class="branchInfo">
        <div class="branchItem">
            <div class="left">
                <div style="background: #f5c847">
                    <img src="../images/branch.png" alt="">
                </div>
            </div>
            <div class="right">
                <div class="count">{{branchInfo.bcounts}}</div>
                <div class="name">店铺总数</div>
            </div>
        </div>
        <div class="branchItem">
            <div class="left">
                <div style="background: #44aff0">
                    <img src="../images/staff.png" alt="">
                </div>
            </div>
            <div class="right">
                <div class="count">{{branchInfo.scounts}}</div>
                <div class="name">员工总数</div>
            </div>
        </div>
        <div class="branchItem">
            <div class="left">
                <div style="background: #f36f8a">
                    <img src="../images/goods.png" alt="">
                </div>
            </div>
            <div class="right">
                <div class="count">{{branchInfo.bgcounts}}</div>
                <div class="name">商品总数</div>
            </div>
        </div>
    </div>


    <fieldset>
        <legend class="legend">数据统计</legend>
        <el-row>
            <el-col :span="8">
                <div class="grid-content">
                    <div class="title">商品售价统计</div>

                    <div id="fig1" style="width: 90%;height: 400px"></div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content">
                    <div class="title">部门人员统计</div>

                    <div id="fig2" style="width: 90%;height: 400px"></div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content">
                    <div class="title">商品库存统计</div>

                    <div id="fig3" style="width: 90%;height: 400px"></div>
                </div>
            </el-col>
        </el-row>
    </fieldset>
</div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            staff: {
                branch:{}
            },//员工信息
            branchInfo: {},//店铺数目，员工数目，商品总数
            allGoods: [], //商品售价统计
            allStaff: [],//部门员工统计
            branchGoodsInfo: [],//商品库存统计
        },
        //自启动
        mounted() {
            //获取登陆人信息
            this.getStaffInfo();
            /*获取商品售价统计信息*/
            this.getBranchAllInfo();
            //获取店铺数目，员工数目，商品总数
            this.getBranchInfo();
            //计算该门店下 各部门的员工人数
            this.deptStaff();
            //计算该商品库存统计
            this.goodsCountInfo();
        },
        methods: {
            //得到登陆人名称，登陆人店铺名称
            getStaffInfo() {
                axios.get('/main/getStaffInfo').then(res => {
                    this.staff = res.data.data;
                    //console.log(this.staff,"~~~~~~~~~~~~~~~~~");
                })
            },
            //获取店铺数目，员工数目，商品总数
            getBranchInfo() {
                axios.get('/main/getBranchStaffGoodsInfo').then(res => {
                    this.branchInfo = res.data.data;
                })
            },
            /*商品售价统计*/
            getBranchAllInfo() {
                axios.get('/main/getGoodsAllInfo').then(res => {
                    this.allGoods = res.data.data;
                    this.priceGoods();
                })
            },
            /*商品售价统计*/
            priceGoods() {
                let myChart = echarts.init(document.getElementById('fig1'));
                // 绘制图表
                myChart.setOption({
                    xAxis: {
                        grid: {
                            //定位
                            top: '10%',
                            bottom: '35%'
                        },
                        type: 'category',
                        data: this.allGoods.goodsName,
                        axisLabel: {
                            rotate: 30,  //让文本倾斜
                            interval: 0,
                            // show: true,
                            textStyle: {
                                color: "#23262e",
                                fontSize: 8
                            },
                        },
                    },
                    yAxis: {
                        type: "value",
                    },
                    series: [
                        {
                            name: '进价',
                            type: 'line',
                            data: this.allGoods.cprice,
                            stack: 'all',
                            areaStyle: {},
                        },
                        {
                            name: '售价',
                            type: 'line',
                            data: this.allGoods.sprice,
                            stack: 'all',
                            areaStyle: {}
                        }
                    ],
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (arg) {
                            return arg[0].name +
                                "</br><div style='width: 10px;height: 10px;margin: 0 4px;background: red;border-radius: 50%;display: inline-block'> </div>进价:" + arg[0].data +
                                "</br><div style='width: 10px;height: 10px;margin: 0 4px;background: #b5c334;border-radius: 50%;display: inline-block'> </div>售价:" + arg[1].data
                        }
                    },
                    //工具箱按钮
                    toolbox: {
                        feature: {
                            saveAsImage: {},//导出图片
                        }
                    },
                    //图例
                    legend: {
                        data: ['进价', '售价']
                    },

                })
                window.onresize = myChart.resize;
            },
            /*部门员工统计*/
            deptStaff() {
                axios.get('/main/getDeptStaffCounts').then(res => {
                    this.allStaff = res.data.data;
                    let myChart = echarts.init(document.getElementById('fig2'));
                    let option = {
                        title: {
                            text: "各部门员工统计",
                            //控制标题位置
                            x: 'center',
                            y: 4,
                            subtext: '实时更新'
                        },
                        series: [
                            {
                                type: 'pie',
                                data: this.allStaff,
                                label: {//饼图文字的显示
                                    show: true,//显示文字
                                    formatter: function (arg) {
                                        return arg.name;
                                    }
                                },
                                center: ['50%', '65%'],
                                radius: '40%',//饼图的半径
                                // roseType: 'radius',//南丁格尔图  饼图的每一个区域的半径是不同的
                                selectedMode: 'multiple',
                                selectedOffset: 30,//选中偏移量
                            },
                        ],
                        //图例
                        legend: {
                            orient: "vertical",//图例的布局，水平布局、垂直布局
                            type: 'scroll',
                            left: 10,
                            top: 4,
                            icon: 'circle',
                            textStyle: {//图例字体样式
                                color: "#000",
                                fontSize: 14,
                                fontFamily: "微软雅黑"
                            }
                        },
                        //工具箱按钮
                        toolbox: {
                            feature: {
                                saveAsImage: {},//导出图片
                            }
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: function (arg) {
                                return "部门</br>" + arg.name + ": " + arg.value + " (" + arg.percent + "%)";
                            }
                        }
                    };
                    // 5.进行配置
                    myChart.setOption(option);
                    window.onresize = myChart.resize;
                })
            },
            /*商品库存统计*/
            goodsCountInfo() {
                axios.get('/main/getGoodsAndNameCounts').then(res => {
                    this.branchGoodsInfo=res.data.data;
                    let myChart = echarts.init(document.getElementById('fig3'));
                    let option = {
                        title: {
                            text: "商品库存统计",
                            //控制标题位置
                            x: 'center',
                            y: 10,
                            subtext: '实时更新'
                        },
                        xAxis: {
                            type: 'category',  // 类目轴
                            data: this.branchGoodsInfo.goodsName,
                            axisLabel: {
                                rotate: 30,  //让文本倾斜
                                show: true,
                                textStyle: {
                                    color: "#23262e",
                                    fontSize: 10
                                },
                            },
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                type: 'bar',
                                data: this.branchGoodsInfo.goodsCounts,
                                itemStyle: {
                                    color: function (params) {
                                        let colorList = ['#c1232b', '#b5c334', '#fcce10', '#c75450', '#ffb32c', '#5845ba']
                                        return colorList[params.dataIndex]
                                    },
                                },
                                areaStyle: {},
                            }
                        ],
                        //工具箱按钮
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                                ,//导出图片
                            }
                        },
                        //柱状图上的文字显示
                        label: {
                            show: true,  // 是否显示
                            position: 'top',  // 显示位置
                        },
                        tooltip: {
                            trigger: 'axis',
                            formatter: function (arg) {
                                return arg[0].name +
                                    "</br><div style='width: 10px;height: 10px;margin: 0 4px;background: red;border-radius: 50%;display: inline-block'> </div>商品库存:" + arg[0].data;
                            },
                            showDelay: 0,  // 显示延迟
                            axisPointer: {
                                type: 'shadow',
                            }
                        },
                        barWidth: '40%', //柱状图的宽度
                    };
                    // 5.进行配置
                    myChart.setOption(option)
                    window.onresize = myChart.resize;
                })
            },
        }
    })
</script>
</html>
